
<template>
    <footer>
        <div v-for="(l,i) in footList" :key="i">
            <router-link :to="{name:l.name}">
                <i class="iconfont" :class="l.icon" ></i>
                <span>{{l.txt}}</span>
            </router-link>
        </div>
    </footer>
</template>

<script>
import {footList} from "@/utils";
export default {
    data(){
        return{
            footList,
        }
    },
}
</script>

<style lang="scss" scoped>
 footer{
	position:fixed;
	width:100%;
	height:50px;
	left:0;
	bottom:0;
	background:#fff;
	display:flex !important;
    z-index:100;
	div{
		flex:1;
		height:50px;
		a{
			display: block;
			width:100%;
			height:100%;
			display:flex;
			flex-direction:column;
			box-sizing:border-box;
			padding:8px 0 3px 0;
			text-align:center;
			font-family:"微软雅黑";
			color:#999;
			position: relative;
			i{
                width:100%;
                height:20px;
                line-height:20px;
                font-size:18px !important;
			}
			span{
				width:100%;
				height:19px;
				line-height:19px;
				font-size:14px;
			}
			// .hot{
			// 	position: absolute;
			// 	top:3px;
			// 	left:60%;
			// 	display: inline-block;
            //     width:12px;
            //     height:16px;
            //     font-size:12px;
            //     line-height: 16px;
			// 	border-radius: 50%;
			// }
		}
		.nav-active,.router-link-exact-active,.router-link-active{
			color:#b83320;
			border-color:#b83320;
		}

	}
}
</style>
